<template>
    <view>
        <u-popup
            @close="close"
            :closeOnClickOverlay="false"
            :closeable="true"
            mode="center"
            :round="6"
            :safeAreaInsetBottom="false"
            :show="visible"
        >
            <view class="protocol">
                <view class="title">{{ title }}</view>
                <view class="content">
                    <scroll-view :scrollTop="scrollTop" :scrollY="true" style="height: 100%; overflow-y: auto">
                        <rich-text :nodes="content"></rich-text>
                    </scroll-view>
                </view>
                <view class="button">
                    <u-button
                        @click="confirm"
                        color="#ea4679"
                        shape="circle"
                        text="我已知晓并同意"
                        type="primary"
                    ></u-button>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
export default {
  name: 'protcol',
  data() {
    return {
      visible: false,
      title: '',
      content: '',
      scrollTop: 0,
    };
  },
  created() {
    this.$util.request({
      url: '/article/getDetail',
      data: {
        type: 'agree_use'
      },
      loading: false
    }).then(res => {
      if (res.data.content) {
        this.content = res.data.content;
        this.title = res.data.title;
        this.show()
      }
    })
  },
  methods: {
    show() {
      this.visible = true;
      this.scrollTop = 0;
    },
    close() {
      this.visible = false;
      this.$emit('close');
    },
    confirm() {
      this.visible = false;
      this.$emit('confirm');
    }
  }
};
</script>
<style>
@import './protocol.css';
</style>
